<template>
  <div class="_wz_curriculumDetails">
    <table style="font-size: 12px;" cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
      </colgroup>
      <tbody>

      <tr>
        <td style="font-weight: 600;position:relative;" colspan="8">培训记录</td>
      </tr>
      <tr>
        <td colspan="2" rowspan="4">
          <div style="display: flex;align-content: center;justify-content: center;">
            <div class="demo-upload-list">
              <Image :src="!!formData.driverAvatar ? apiUrl.imgUrl + formData.driverAvatar : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.driverAvatar ? apiUrl.imgUrl + formData.driverAvatar : 'img/zwtpxd.png']" />
            </div>
            <div style="clear: both;"></div>
          </div>
        </td>
        <td>从业人员</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!formData.driverName?formData.driverName:'--'}}</td>
        <td>从业类型</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!formData.driverTypeName?formData.driverTypeName:'--'}}</td>
      </tr>
      <tr>
        <td>联系电话</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!formData.driverPhone?formData.driverPhone:'--'}}</td>
        <td>身份证号</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!formData.driverIdentifyNum?formData.driverIdentifyNum:'--'}}</td>
      </tr>
      <tr>
        <td>驾乘车辆</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!formData.driverVehicleNo?formData.driverVehicleNo:'--'}}</td>
        <td>培训月份</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!formData.trainCourseStudentPlanCreateDate?formData.trainCourseStudentPlanCreateDate:'--'}}</td>
      </tr>
      <tr>
        <td>经营企业</td>
        <td style="color:#2d8cf0;" colspan="5">{{!!formData.deptName?formData.deptName:'--'}}</td>
      </tr>
      <tr>
        <td colspan="2">培训课程</td>
        <td>培训周期</td>
        <td>培训类型</td>
        <td>培训方向</td>
        <td>培训情况</td>
        <td>培训时长</td>
        <td>随堂测验</td>
      </tr>
      <tr>
        <td style="color:#2d8cf0;" colspan="2">
          {{!!formData.trainCourseStudentPlanName?formData.trainCourseStudentPlanName:'--'}}
        </td>
        <td style="color:#2d8cf0;">
          {{!!formData.trainCourseStudentPlanCreateDate?formData.trainCourseStudentPlanCreateDate:'--'}}
        </td>
        <td style="color:#2d8cf0;">
          {{!!formData.trainCourseStudentPlanTypeName?formData.trainCourseStudentPlanTypeName:'--'}}
        </td>
        <td style="color:#2d8cf0;">
          {{!!formData.trainCourseStudentPlanDirectionName?formData.trainCourseStudentPlanDirectionName:'--'}}
        </td>
        <td style="color:#2d8cf0;">
          <template v-if="formData.trainCourseStudentPlanFinish == 0">未开始</template>
          <template v-if="formData.trainCourseStudentPlanFinish == 1">已完成</template>
          <template v-if="formData.trainCourseStudentPlanFinish == 2">进行中</template>
        </td>
        <td style="color:#2d8cf0;">
          {{formData.trainCourseStudentPlanLearnDuration + '/' + formData.trainCourseStudentPlanTotalDuration}}分
        </td>
        <td style="color:#2d8cf0;">
          <template v-if="formData.trainCourseStudentPlanExam == 0">未发布</template>
          <template v-if="formData.trainCourseStudentPlanExam == 1">
            <template v-if="formData.trainCourseStudentPlanExamState == 0">未考试</template>
            <template v-if="formData.trainCourseStudentPlanExamState == 1">及格</template>
            <template v-if="formData.trainCourseStudentPlanExamState == 2">不及格</template>
          </template>
        </td>

      </tr>
      <tr>
        <td style="text-align: center;">序号</td>
        <td style="text-align: center;" colspan="3">课件名称</td>
        <td colspan="2" style="text-align: center;">培训开始时间</td>
        <td colspan="2" style="text-align: center;">培训结束时间</td>
      </tr>
      <template v-for="item,index in formData.trainCourseStudentPlanTaskList">
        <tr>
          <td rowspan="2" style="color:#2d8cf0;text-align: center;">{{index+1}}</td>
          <td style="color:#2d8cf0;text-align: center;" colspan="3">{{!!item.materialTrainName?item.materialTrainName:'--'}}</td>
          <td colspan="2" style="color:#2d8cf0;text-align: center;">
            {{!!item.trainCourseStudentPlanTaskBeginTime?item.trainCourseStudentPlanTaskBeginTime:'--'}}
          </td>
          <td colspan="2" style="color:#2d8cf0;text-align: center;">
            {{!!item.trainCourseStudentPlanTaskEndTime?item.trainCourseStudentPlanTaskEndTime:'--'}}
          </td>
        </tr>
        <tr>
          <td colspan="7">
            <div v-if="!!item.trainCourseStudentRecordImgList && item.trainCourseStudentRecordImgList.length > 0">
              <div class="demo-upload-list" v-for="items in item.trainCourseStudentRecordImgList">
                <Image :src="apiUrl.imgUrl + items.imgUrl" fit="contain" width=100% height=100% preview :preview-list="[apiUrl.imgUrl + items.imgUrl]" />
              </div>
              <h6 style="clear: both;"></h6>
            </div>
            <div v-else>暂无培训证据</div>
          </td>
        </tr>
      </template>
      </tbody>
    </table>
  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch,
  resolveComponent
} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reformData
export default defineComponent({
  name: 'curriculumDetails',//组件名称
  components: {
  },//组件引用
  props: ['selectData'],//接收来自父组件的数据
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      formData: {},//培训数据


    });


    //加载数据
    const loadData = ()=>{
      $axios.post(apiUrl.educateTrainPlanTrainCourseStudentPlanInfo,{uuid:props.selectData.uuid}).then((res) => {
        if (!!res) {
          state.formData = res.data.data;
        }
      }).catch((err) => {
        console.log("失败", err)
      })


    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      apiUrl,
    }
  }
})


</script>
<style lang="less">

._wz_curriculumDetails {




  table {
    border-top: 1px solid #515a6e;
    border-left: 1px solid #515a6e;
    width: 100%;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border-right: 1px solid #515a6e;
      border-bottom: 1px solid #515a6e;
      padding-left: 12px;
      padding-right: 12px;
    }
  }


  .demo-upload-list {
    float: left;
    margin: 10px;
    display: block;
    width: 100px;
    height: 132px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

    img {
      width: 100%;
      height: 100%;
    }
  }

}
</style>
